<template>
  <div class="score-detail">
    <template v-if="againScore">
      <Evaluate
        :rescore="true"
        @offReScore="offReScore"
        :scoringId="resultsData.resultID"
        :templateConfig="showScore && showScore.length && showScore[0]"
        :sessionId="resultsData._id"
      />
    </template>
    <div v-else class="detail-info">
      <div class="title">质检详情</div>
      <div v-for="(item, index) in showScore" :key="index" class="all-record">
        <div v-for="value in scoreInfo" :key="value.prop" class="score-info">
          <span class="label">{{ value.label }}</span>
          <span class="value">{{
            value.prop === "scoreType"
              ? item[value.prop] === "1"
                ? "标准打分模式"
                : "权重打分模式"
              : item[value.prop]
          }}</span>
        </div>
        <Title name="标准分" :score="getItemScore(item.qualityItemScore)" />
        <div
          v-for="val in item.qualityItemScore"
          :key="val.id"
          class="score-info"
        >
          <span class="label">{{ val.name }}</span>
          <span class="value"
            >{{
              val.weight ? (val.score * val.weight) / 100 : val.score
            }}分</span
          >
        </div>
        <Title
          name="附加分"
          :score="getItemScore(item.qualityAppendItemScore)"
        />
        <div
          v-for="val in item.qualityAppendItemScore"
          :key="val.id"
          class="score-info"
        >
          <span class="label">{{ val.name }}</span>
          <span class="value"
            >{{
              val.weight ? (val.score * val.weight) / 100 : val.score
            }}分</span
          >
        </div>
        <div class="total-score">
          <span class="label">总分:</span>
          <span class="num">{{ item.gradeScore }}</span>
        </div>
        <p class="comment">质检点评</p>
        <div class="cont">
          {{ item.comments }}
        </div>
        <div
          v-if="
            historyShow &&
            showScore.length > 1 &&
            index !== showScore.length - 1
          "
          class="line"
        ></div>
      </div>
      <div class="btns">
        <el-button
          v-if="!historyShow"
          size="mini"
          @click="moreHistory"
          v-functions="['qc_webchat_session_query_history']"
          >更多历史</el-button
        >
        <el-button
          type="primary"
          class="again"
          size="mini"
          @click="reScore"
          v-functions="['qc_webchat_session_query_score']"
          >重新评分</el-button
        >
      </div>
      <div class="tip" v-show="historyShow && showScore && showScore.length">
        <span v-if="showAll" class="all">已经到底啦~</span>
        <span v-else class="more" @click="getMoreHistory">加载更多</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import configTable from '@/components/globalTool/resizeTable/index.vue'
import Title from './title.vue'
import Evaluate from '@/views/qualityCheck/score/components/evaluate.vue'
import { commonAction } from '@/utils/common'
import { CommonModule } from '@/store/modules/common'
@Component({
  name: 'scoreDetail',
  components: {
    configTable,
    Title,
    Evaluate
  }
})
export default class ScoreDetail extends Vue {
  [x: string]: any
  @Prop() private resultsData
  @Prop() private modelsList

  private showScore: any = []

  private scoreInfo: any = [
    {
      label: '打分模式',
      prop: 'scoreType'
    },
    {
      label: '被质检人',
      prop: 'qualityUserName'
    },
    {
      label: '质检模板',
      prop: 'name'
    },
    {
      label: '质检时间',
      prop: 'qualityTime'
    }
  ]

  private historyShow: boolean = false

  private againScore: boolean = false

  private showAll: boolean = false

  private historyList: any = []

  private pageData: any = {
    page: 1,
    limit: 10,
    total: 0
  }

  private getItemScore (item: any) {
    let total = 0
    item.forEach(v => {
      total += v.weight ? (v.score * v.weight) / 100 : v.score
    })
    return total.toFixed(2)
  }

  private reScore () {
    this.againScore = true
    // 模板标准分赋值
    if (this.showScore && this.showScore.length) {
      const modelScore = this.modelsList.filter(item => item._id === this.showScore[0].qualityConfigId)
      if (this.showScore[0].qualityItemScore && this.showScore[0].qualityItemScore.length) {
        this.showScore[0].qualityItemScore.forEach(v => {
          modelScore[0].qualityItem.forEach(s => {
            if (v.id === s.id) {
              v.maxScore = s.score
            }
          })
        })
      }
      if (this.showScore[0].qualityAppendItemScore && this.showScore[0].qualityAppendItemScore.length) {
        this.showScore[0].qualityAppendItemScore.forEach(v => {
          modelScore[0].qualityAppendItem.forEach(s => {
            if (v.id === s.id) {
              v.maxScore = s.score
            }
          })
        })
      }
    }
  }

  private offReScore () {
    this.againScore = false
    this.historyShow = false
    this.showAll = false
    this.showScore = []
    this.getMoreData(true)
  }

  private moreHistory () {
    this.historyShow = true
    this.showScore = this.historyList
  }

  private getMoreHistory () {
    this.pageData.page++
    this.getMoreData()
  }

  private getAgentName (agentId) {
    const agent = (CommonModule as any).publicCache.userListObj[agentId]
    if (agent) {
      return agent.name
    }
    return '--'
  }

  private getMoreData (showOne?: any) {
    const params = {
      url: '/im-center/action/quality/queryQualityHistory',
      method: 'POST',
      data: {
        limit: this.pageData.limit,
        page: this.pageData.page,
        chatSessionId: this.resultsData._id
      }
    }
    commonAction(params).then(res => {
      if (res.success && res.data) {
        if (showOne) {
          this.historyList = res.data.list.map(v => v.data)
          this.showScore = [res.data.list[0].data] || []
        } else {
          const scoreList = res.data.list.map(item => {
            item.data.qualityUserName = this.getAgentName(item.data.userId)
            return item.data
          })
          this.showScore = this.showScore.concat(scoreList)
        }
        if (res.data.list.length < this.pageData.limit) {
          this.showAll = true
        } else {
          this.showAll = false
        }
      }
    })
  }

  public initData () {
    this.showAll = false
    this.historyShow = false
    this.pageData.page = 1
    this.getMoreData(true)
  }
}
</script>
<style lang="stylus" scoped>
.score-detail
  flex 1
  height calc(100vh - 60px)
  .detail-info
    height calc(100% - 24px)
    padding 0 24px
  .score-info
    display flex
    justify-content space-between
    margin-bottom 10px
    .label
      width 48px
      color #767E91
    .value
      flex 1
      text-align right
      color #303753
  .total-score
    display flex
    justify-content space-between
    padding 20px 0
    border-bottom 1px solid #E7E9ED
    .label
      font-weight 600
      color #303753
    .num
      font-size 18px
      font-weight 600
      color #008BEE
      font-family PingFang SC
  .comment
    color #303753
    margin 20px 0 12px
    font-weight 600
  .cont
    color #767E91
    max-height 300px
    overflow auto
    line-height 20px
  .btns
    width 100%
    text-align right
    margin-top 20px
    .again
      margin-left 10px
  .tip
    width 100%
    text-align center
    margin-top 20px
    .more
      color #008BEE
      cursor pointer
    .all
      color #999
  .line
    border-bottom 1px dashed #E7E9ED
    margin 20px 0
  .title
    padding 32px 0
    font-size 14px
    font-weight 600
    color #303753
    border-bottom 1px solid #E7E9ED
    margin-bottom 20px
</style>
